<template>
  <div class="main">
    <div class="add" @click="add">完成</div>
    <van-tree-select height="100vh" :items="typeBeans" :main-active-index.sync="active">
      <template #content>
        <div class="ins_content">
          <div class="ins_header">
            <div class="ins_img">
              <van-image round width="50px" height="50px" :src="currentItem.Logo" />
            </div>
            <div class="ins_text">
              <div class="mb-10">{{ currentItem.Name }}</div>
              <div>
                <!--<span>暂无描述</span>-->
                <span style="color: #529de6" @click="goIndustryDescribe">查看更多</span>
              </div>
            </div>
            <div class="ins_radio">
              <van-radio-group class="radio" v-model="currentItem.IsDefault" @change="handleRadioGroupClick">
                <van-radio :name="currentItem.ID" @click="handleRadioClick" 
                  @click.native.prevent="radioChange('1')"></van-radio>
              </van-radio-group>
            </div>
          </div>
          <div class="ins_child">
            <div class="child_title">包含以下子行业：</div>
            <div class="child_item">
              <!--<van-tag color="#529de6"  size="large">基础化学原料制造</van-tag>-->

              <div v-for="(item, index) in currentItem.children" :key="index" @click="childItemClcik(item)"
                :class="item.IsDefault ? 'item_choose' : 'item_no_choose'">{{ item.Name }}</div>
              <!-- <div v-for="(item, index) in currentItem.children" :key="index" @click="childItemClcik(item)" class="item_choose">{{item.Name}}</div> -->
            </div>
          </div>
        </div>
      </template>
    </van-tree-select>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  components: {
  },
  data() {
    return {
      radio: '',
      active: 0,
      // items: [{ text: '机械行业' }, { text: '冶金与有色行业' }],
      typeBeans: [],
      myChoose: [],
      isChange: false,
      mychooseids: [],
      CompanyCode: ''
    }
  },

  computed: {
    ...mapGetters(['baseUrl']),
    currentItem() {
      return this.typeBeans[this.active]
    }
  },
  created() {
    this.mychooseids = this.$store.state.Industry.split(',')
    this.CompanyCode  = this.$route.query.CompanyCode
    this.getProfessionList()
  },
  methods: {
    radioChange(value) {
      console.log("radioChange"+value)
      return
    },
    childItemClcik(item) {
      if (this.currentItem.IsDefault) {
        this.$toast("选了主行业，不能再选子行业!")
        return
      }

      if (!item.IsDefault) {
        if (this.myChoose.length > 2) {
          this.$toast("行业最多选3项");
          return
        }
        item.IsDefault = true
        const temp = this.typeBeans.find(function (element) {
          return element.ID == item.PID
        })
        if (typeof (temp.badge) == 'undefined') {
          temp.badge = 1
        } else {
          temp.badge += 1
        }
        this.myChoose.push(item)
      } else {
        item.IsDefault = false
        this.myChoose = this.myChoose.filter((element) => { return element.ID != item.ID })
        const temp = this.typeBeans.find(function (element) {
          return element.ID == item.PID
        })
        temp.badge -= 1
        console.log(this.myChoose)
      }
    },
    handleRadioGroupClick(value) {
      this.isChange = true
      console.log("handleRadioGroupClick")

    },
    handleRadioClick(value) {
      let hasChildChoose = false
      this.myChoose.forEach(element => {
        if (element.PID == this.currentItem.ID) {
          hasChildChoose = true
        }
      });

      // if (this.myChoose.length > 2 && this.currentItem.IsDefault == false && !hasChildChoose) {
      if (this.myChoose.length > 2 && this.isChange == true && !hasChildChoose) {
        this.$toast("行业最多选3项");
        this.currentItem.IsDefault = false
        this.currentItem.badge = null
        this.myChoose = this.myChoose.filter(element => this.currentItem.ID != element.ID)
        return
      }
      console.log("this.isChange    "+this.isChange)

      this.currentItem.IsDefault = this.isChange ? this.currentItem.IsDefault : !this.currentItem.IsDefault
      if (this.currentItem.IsDefault) {
        this.currentItem.badge = 1
        this.myChoose.push(this.currentItem)
        this.removeChildChoose(this.currentItem.ID)
      } else {
        this.currentItem.badge = null
        this.myChoose = this.myChoose.filter(element => this.currentItem.ID != element.ID)
      }
      this.isChange = false
      this.$forceUpdate()//页面刷新
    },
    removeChildChoose(ID) {
      console.log("" + ID)
      this.currentItem.children.map(element => {
        element.IsDefault = false

      })
      this.myChoose = this.myChoose.filter(element2 => element2.PID != ID)

    },
    goIndustryDescribe() {
      this.$router.push('/BaseInfo/IndustryDescribe')
    },
    getProfessionList() {
      this.$axios.get("InfoApplyProfession/GetListWithType").then((res) => {
        console.log(res.data)
        //将原来已选的行业，转当前页面List
        if (this.mychooseids.length > 0) {
          res.data.forEach(element => {
            this.mychooseids.forEach(element3 => {
              if (element.ID == element3) {
                this.myChoose.push(element)
              }
            })
          })

        }

        console.log(this.myChoose)
        res.data.forEach(element => {
          element.text = element.Name

          element.children = new Array()
          if (element.PID == -1) {
            this.typeBeans.push(element)
            if (this.myChoose.length > 0) {
              let badge = 0
              this.myChoose.forEach(element3 => {
                if (element.ID == element3.ID) {
                  badge = 1
                  element.IsDefault = element.ID


                } else if (element.ID == element3.PID) {
                  badge += 1
                }

                if (badge > 0) {
                  element.badge = badge
                }

              })
            }
            res.data.forEach(element2 => {

              if (element2.PID == element.ID) {
                // element.Childs.push(element2)

                element.children.push(element2)
                if (this.myChoose.length > 0) {
                  this.myChoose.forEach(element3 => {
                    if (element2.ID == element3.ID) {
                      element2.IsDefault = true
                    }
                  })
                }
              }
            });
          }
        });

      }).catch((err) => {
        console.log('err', err)
      })
    },
    add() {
      if (this.myChoose.length == 0) {
        this.$toast("请至少选中一项")
        return
      }
      let str = []
      let ids = []
      this.myChoose.forEach(element => {
        str.push(element.Name)
        ids.push(element.ID)
      });
      if(this.CompanyCode == null || this.CompanyCode == ''){
        this.$store.commit('setIndustry', ids.join(','))
      this.$store.commit('setIndustryName', str.join(','))
      this.$router.go(-1)
      }else{
        let param = {}
      param.companyCode = this.CompanyCode
      param.applyProfession = ids.join(',')
    
      this.$axios.get("/UserEnterprise/ChangeApplyprofession",{params:param}).then((res)=>{
        this.loading = false
        this.$router.go(-1)
      }).catch((err) => {
      	console.log('err', err)
      })
      }




    }
  },
}
</script>

<style lang="less">
.van-sidebar-item__text {
  width: 90% !important;
  // overflow:hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

}

.ins_content {
  padding: 10px;

  .ins_header {
    align-items: center;
    display: flex;
    /*padding: 10px;*/
    height: 70px;
    border-bottom: 1px solid #e8f1f8;

    .ins_img {
      margin-right: 10px;
    }

    .ins_text {
      margin-right: 20px;
      flex: 1;
    }

    .ins_radio {
      align-items: center;
      padding-right: 28px;
      /*padding: 15px 10px;*/
    }
  }

  .ins_child {
    margin-top: 10px;

    .child_title {
      margin-bottom: 10px;
    }

    .child_item {
      display: flex;
      flex-wrap: wrap;

      >div {

        margin: 4px;
        padding: 10px;
        text-align: center;
        height: 50px;
        width: 46%;
        // color: #ffffff;

        // background-color: #529de6;
        border-radius: 5px;
      }
    }

  }

  .item_no_choose {
    color: #707070;
    background-color: #e8f1f8;
  }

  .item_choose {
    color: #ffffff;
    background-color: #529de6;
  }
}
</style>
